<template>
  <div v-loading="tableLoading" class="gl_contentBox gl_heightFull" style="padding: 0">
    <div class="train_amount">
      <div class="train_logo">
        <img :src="getStaticPhotoUrl(info.trainning && info.trainning.logoUrl)" alt="">
      </div>
      <div class="train_message gl_fs_16 gl_ft_weight">
        <p class="gl_mb_15">
          {{ info.trainning && info.trainning.name }}
          <el-tag v-if="info.trainning && info.trainning.trainningType" class="gl_ml_20" size="mini">{{ info.trainning.trainningType }}</el-tag>
        </p>
        <p class="gl_fs_12">
          <span>培训时间：{{ info.trainning && info.trainning.startTime && info.trainning.startTime.substring(0, 10) }}</span>
          <span>参训人数：{{ info.registersCount }}人</span>
        </p>
      </div>
    </div>
    <div class="gl_padding_15">
      <div class="gl_px_10 gl_mb_15">
        <el-row :gutter="20" class="gl_searchBox">
          <el-col :span="6" :lg="4">
            <p>培训科目</p>
            <el-select v-model="form.SubjectId" size="mini" placeholder="请选择培训科目" filterable @change="getPageList()">
              <el-option label="全部" value="" />
              <el-option v-for="item in subjectList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-col>
          <el-col :span="6" :lg="4">
            <p>审核状态</p>
            <el-select v-model="form.ApproveStatusCode" size="mini" placeholder="请选择审核状态" filterable @change="getPageList()">
              <el-option label="全部" value="" />
              <el-option v-for="item in dict.entryApproveStatus" :key="item.code" :value="item.code" :label="item.value" />
            </el-select>
          </el-col>
          <el-col :span="6" :lg="4">
            <p>查询姓名</p>
            <el-input v-model="form.Filter" placeholder="请输入姓名" size="mini" clearable @change="getPageList()" />
          </el-col>
          <el-col :span="6" :lg="12" align="right" class="search_btn">
            <!-- 查询按钮 -->
            <el-button type="primary" size="mini" @click="getPageList()">查询</el-button>
            <!-- 重置按钮 -->
            <el-button type="warning" size="mini" @click="initForm()">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <el-row v-if="false" class="gl_fs_14 gl_mb_5" style="color: #595959">
        <el-col align="right">共计 {{ total }} 条数据</el-col>
      </el-row>
      <el-table class="gl_table_noBorder gl_mb_15" :data="tableData" stripe size="mini">
        <el-table-column type="index" label="序号" align="center" :width="60" />
        <el-table-column prop="orderNo" label="订单号" :width="190" />
        <el-table-column label="头像" :width="60" align="center">
          <template slot-scope="{ row }">
            <img class="people_coverimg" :src="getStaticPhotoUrl(row.trainningRegister.imagePath)" alt="" @error="errorPhoto">
          </template>
        </el-table-column>
        <el-table-column label="姓名" :width="160">
          <template slot-scope="{ row }">
            {{ row.trainningRegister.name }}
          </template>
        </el-table-column>
        <el-table-column label="证件号码" :width="140">
          <template slot-scope="{ row }">
            {{ row.trainningRegister.idCardNumber }}
          </template>
        </el-table-column>
        <el-table-column label="科目" :min-width="160">
          <template slot-scope="{ row }">
            <span v-for="(item, index) in row.subjects" :key="item.id" class="gl_dis_ib">
              <span>{{ item.name }}</span>
              <span v-if="index != row.subjects.length - 1">；</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="费用" :min-width="160">
          <template slot-scope="{ row }">
            <span v-for="(item, index) in row.entryOrder.charges" :key="index" class="gl_pr_15 gl_dis_ib">
              <span>{{ item.name + ' ' }}</span>
              <span>{{ (item.categoryAmount / 100).toFixed(2) }}元</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="费用总计" :width="90">
          <template slot-scope="{ row }">
            {{ (row.amount / 100).toFixed(2) }}元
          </template>
        </el-table-column>
        <el-table-column prop="approveStatus.name" label="审核" :width="100" />
        <el-table-column fixed="right" label="操作" align="left" :width="90">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text" @click="enterToApproveDetail(row)">
              <span class="gl_color_primary">查看详情</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="text-align: right;" class="gl_pb_15 gl_mr_15">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="form.MaxResultCount"
          :current-page="form.Page"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import defaultPhoto from '@/assets/images/face_default.png';
import { Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO } from '@/lib/form/train/swaggerForm';
import {
  api_GET_TrainSubject, // 获取科目列表
  api_GET_TrainTrainningEntryApprovalSummary,
  api_GET_TrainTrainningEntryApprovalTrainningEntryApprovals // 获取表格数据
} from '@/extend/api/trainswaggerApi/app';
export default {
  data() {
    return {
      defaultPhoto: defaultPhoto,
      tableLoading: false,
      info: {},
      subjectList: [], // 科目列表
      form: new Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO(),
      tableData: [],
      total: 0
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    this.trainId = this.$route.params.id;
    this.getSubjectList();
    this.initForm();
    this.getTrainDetail();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    initForm() {
      this.form = new Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO();
      this.getPageList();
    },
    // 获取科目列表
    getSubjectList() {
      var that = this;
      const form = {
        trainningId: that.trainId
      };
      api_GET_TrainSubject(form).then(res => {
        that.subjectList = res.trainSubjects;
      }, (error) => {
        that.$message({ type: 'error', message: '获取科目失败！' + (error.error && error.error.message || '') });
      });
    },
    // 获取培训详情
    getTrainDetail() {
      const form = {
        TrainningId: this.trainId,
        ApproveStatusCode: '',
        IncludeTrainning: true
      };
      api_GET_TrainTrainningEntryApprovalSummary(form).then(res => {
        this.info = res || {};
      }, error => {
        this.$message({ type: 'error', message: '获取培训详情失败！' + (error.error && error.error.message || '') });
      });
    },
    // 获取表格数据
    getPageList(page) {
      this.form.Page = page || 1;
      this.form.SkipCount = (this.form.Page - 1) * this.form.MaxResultCount;
      this.form.TrainningId = this.trainId;
      // this.form.IncludeSourceRegister = true; // 原始会员
      this.form.IncludeTrainningRegister = true; // 培训报名信息
      this.form.IncludeSubjects = true; // 科目列表
      this.form.IncludeOrderDetail = true; // 订单明细
      this.form.IncludeNotApproved = true; // 待审核
      // this.form.IncludeTrainning = true; // 培训
      this.tableLoading = true;
      api_GET_TrainTrainningEntryApprovalTrainningEntryApprovals(this.form).then(res => {
        this.tableLoading = false;
        this.tableData = res.items || [];
        this.total = res.totalCount;
      }, (error) => {
        this.tableLoading = false;
        this.$message({ type: 'error', message: '获取数据失败！' + (error.error && error.error.message || '') });
      });
    },
    // 详情
    enterToApproveDetail(row) {
      const status = row.approveStatusCode === 'ApproveFailed';
      this.$router.push({
        name: 'TrainSeqApproveOrderDetail',
        query: {
          id: row.id,
          registerId: row.registerId,
          orderNo: row.orderNo,
          status: status
        }
      });
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 默认图片
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.form.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style scoped>
.train_amount {
  height: 130px;
  padding: 30px 32px 18px 32px;
  border-bottom: 1px solid #d9d9d9;
}
.train_logo {
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
img {
  width: 100%;
  height: 100%;
}
.train_message {
  display: inline-block;
  vertical-align: middle;
  margin-left: 34px;
}
.train_message .gl_fs_12 span {
  color: #595959;
  padding-right: 40px;
}
.people_coverimg {
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
}
</style>
